<template>
		<view class='login-wrapper'>
			<view class='login-title' >
				<image :style="{'width':screenWidth}" src='https://tse1-mm.cn.bing.net/th/id/R-C.ed2212dc0874814ad49e9656f7c918a5?rik=%2fvImYz28TP%2fG%2fA&riu=http%3a%2f%2fi0.hdslb.com%2fbfs%2farchive%2f299b2a24b4b9c65207ac452d9303c88327400fe5.jpg&ehk=oVsq5TGoa%2fLiJb90EOKYxbwc0XWGO4x2wX3cmRveTlQ%3d&risl=&pid=ImgRaw&r=0'></image>
			</view>
			<view>
				<view class='login-item' :style="{'width':screenWidth}">
					<text class='login-item-text'>账号</text>
					<input v-model="accid" class='login-item-input' placeholder='请输入账户' type='text'
						confirm-type='next'></input>
				</view>
				<view class='login-item' :style="{'width':screenWidth}">
					<text class='login-item-text'>密码</text>
					<input v-model="password" type='password' class='login-item-input' placeholder='请输入密码'
						confirm-type='done'></input>
				</view>
				<button class='login-submit-btn' @click="login()" :loading=loading>登录</button>
			</view>
				<text style="color: #ff0000;">{{induce}}</text>
			<view class='to-register'>
				<text class='login-to-unregister'>没有账号？</text>
				<text class='login-to-register'  @click="gotoregister()">立即注册</text>
			</view>
		</view>
</template>

<script>
	export default {
		props:[
				"password"
			],
		data() {
			return{
				// 账号
               accid:'',
			   // 提示信息
			   induce:'',
			   // 等待提示
			   loading:false
			}
		},
		methods:{
			// 跳转到注册页面
			gotoregister(){
				// console.log(123)
				uni.navigateTo({
					url:'/pages/register/register'
				})
			},
			// 跳转到内容页面
			gotoContent(){
				uni.switchTab({
					url:'/pages/learning/learning'
				})
			},
			// 登录页面
			async login(){
				let data = this.accid
				let res = await this.$api.Personlogin(data);
				// 官方推荐使用Vuex存放token
				if(res.code ==0){
					this.induce = ''
					this.loading = true
					this.$store.dispatch("getuserinfotoken",res.data)
					this.$store.dispatch('getuserinfoaccid',this.accid)
					this.gotoContent()
				}
				else if(res.code == 10000){
					this.induce = res.msg
				}
			}
		},
		computed:{
			screenWidth(){
				return this.$store.state.screenWidth
			},
			accid(){
				return this.$store.state.userinfo.accid
			}
		}
	}
</script>

<style scoped>
	.login-wrapper {
		width: 100%;
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #000;
	}

	.login-wrapper form {
		width: 100%;
	}

	.login-title {
		display: block;
		padding-top:10rpx;
		text-align: center;
	}

	.login-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0 auto;
		width: 90%;
		height: 88rpx;
		border-bottom: 1px solid #C6CBD4;
		transition: border-bottom 0.5s;
	}
   .login-item:hover{
	border-bottom:1px solid #ffaaff ;
    }
	.login-item+.login-item {
		margin-top: 16rpx;
		margin-bottom: 60rpx;
	}

	.login-item-text {
		align-self: center;
		margin-right: 20rpx;
		font-size: 30rpx;
		color: #020202;
	}

	.login-item-input {
		border: none;
		display: inline-block;
		box-sizing: border-box;
		width: 80%;
		font-size: 32rpx;
		padding-left: 10rpx;
	}

	.login-submit-btn {
		width: 90%;
		vertical-align: middle;
		background-color: #3387FF;
		color: #fff;
	}

	.to-register {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
	}

	.login-to-unregister {
		color: #555555;
	}

	.login-to-register {
		color: #4F8DFF;
	}
</style>
